<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
			<view class="text f36 cfff">规格列表</view>
			<view class="btn">
				<view class="clear f30" @tap="changeSelect">{{ showBox ? '编辑' : '选择' }}</view>
				<view class="define f30" @tap="complete()">完成</view>
			</view>
		</view>
		<view class="tipBox"><view class="text f28 c666">温馨提示：规格名称不能修改，只能删除。</view></view>

		<view class="listBox" v-show="showBox">
			<view class="list-item" v-for="(i, index) in list" :key="index">
				<view class="checkbox" @click.stop="changeImg(index)">
					<image src="../../static/images/checkbox.png" mode="aspectFit" v-show="!i.isok"></image>
					<image src="../../static/images/checkbox-on.png" mode="aspectFit" v-show="i.isok"></image>
				</view>
				<view class="text f32 c333">{{ i.name }}</view>
			</view>
		</view>

		<!-- 选择弹出 -->

		<uni-swipe-action v-for="(item, index) in list" :key="index">
			<uni-swipe-action-item :options="options" @click="onClick(item.spec_id)" @change="change">
				<view class="chooseBox" v-show="!showBox">
					<view class="choose-item">
						<view class="name f32 c333">{{ item.name }}</view>
						<view class="arrow"><image src="../../static/images/arrow_right.png" mode=""></image></view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<view style="height: 130upx;"></view>
		<view class="fiexd-add" @click="open">
			<view class="text f32 cfff">
				<image src="../../static/images/tb_icon.png" mode="aspectFit"></image>
				添加新规格
			</view>
		</view>

		<!-- 添加新规格弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="addContent">
				<view class="box">
					<view class="tit tCenter f36 c333">请输入规格名称</view>
					<view class="input-box"><input type="text" placeholder="最多输入12个字符" v-model="name" /></view>
					<view class="btn f30 tCenter">
						<view class="dropBtn" @click="close">取消</view>
						<view class="submit" @click="opens">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniSwipeAction,
		uniSwipeActionItem,
		uniPopup
	},
	data() {
		return {
			specList: [],
			list: '',
			showBox: true,
			name: '',
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#fe6e65'
					}
				}
			]
		};
	},
	onLoad() {
		this.list = [];
		this.list.map((item, index) => {
			this.list[index].isok = false;
		});
		this.getspecList();
	},
	methods: {
		open() {
			let that = this;
			that.$refs.popup.open();
		},
		opens(){
				let that = this;
			that.$ajax('api/v1.goods/specAdd', {
				name: that.name
			})
				.then(res => {
					if (res.code == 1) {
						that.$refs.popup.close();
						that.$sToast('添加成功');
						that.getspecList();
						that.name = ''
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		close() {
			this.$refs.popup.close();
		},
		complete() {
			let that = this;
			if (that.specList.length >2) {
				that.$sToast('最多只能选择两个规格');
			} else {
				this.specList = [];
				this.list.forEach(item => {
					if (item.isok == true) {
						this.specList.push(item);
					}
				});
				console.log(this.specList);
				
				uni.setStorageSync('specList', this.specList);
			uni.navigateTo({
				url: './selection'
			});
			}
		},
		changeImg(index) {
			let list = this.list;
			list[index].isok = !list[index].isok;
			this.list = list;
			this.$set(this.list, index, list[index]);
		},
		changeSelect() {
			this.showBox = !this.showBox;
		},
		getspecList() {
			let that = this;
			that.$ajax('/api/v1.goods/specList', {}, 'GET')
				.then(res => {
					if (res.code == 1) {
						res.result.forEach((item)=>{
							item.values=[]
						})
						that.list = res.result;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		// 规格删除
		onClick(id) {
			let that = this;
			that.$ajax('api/v1.goods/specDel', {
				spec_id: id
			})
				.then(res => {
					if (res.code == 1) {
						that.$sToast('删除成功');
						that.getspecList();
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
			// console.log('当前点击的是第' + e.index + '个按钮，点击内容是' + e.content.text);
		},
		change(open) {
			console.log('当前开启状态：' + open);
		}
	}
};
</script>

<style lang="scss">
.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #249af6;
	padding: 60upx 30upx 25upx 30upx;
	text-align: center;

	.arrow {
		image {
			width: 20upx;
			height: 40upx;
		}
	}

	.btn {
		display: flex;
		flex-direction: row;
		color: #fff;

		.define {
			margin-left: 30upx;
		}
	}
}

.tipBox {
	background-color: #f7f4f8;
	padding: 25upx 30upx;
}

.listBox {
	.list-item {
		border-bottom: 2upx #eee solid;
		padding: 40upx 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.checkbox {
			image {
				width: 50upx;
				height: 50upx;
				margin-right: 35upx;
				vertical-align: middle;
			}
		}
	}
}

// 选择弹出
.chooseBox {
	width: 100%;
	padding-top: 30upx;
	.choose-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx 35upx 30upx;
		margin-bottom: 35upx;
		border-bottom: 2upx #eee solid;
		box-sizing: border-box;
		.arrow {
			image {
				width: 20upx;
				height: 35upx;
			}
		}
	}
}

.fiexd-add {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 100upx;
	line-height: 100upx;
	background-color: #249af6;

	.text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		image {
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}
}
</style>
